<template>
	<div>
    <div style="width: 1050px;display: flex;align-items: center;justify-content: center">
      <div style="width: 980px;margin-top: 30px;margin-bottom: 30px;">
        <div style="width: 100%;height: 50px;display: flex;justify-content: space-between;align-items: center;border-bottom: #e7e7e7 solid 1px;">
          <span style="font-size: 13px;">订单号: &nbsp;&nbsp;<span style="color: red">{{orderMsgCtn.orderId}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; {{orderMsgCtn.paymentTime}}</span>
          <span style="font-size: 18px;">{{showOrderStatus(orderMsgCtn.orderStatus)}}</span>
        </div>
        <div style="border-bottom: #e7e7e7 solid 1px;">
          <div style="width: 100%;display: flex">
            <div style="height: 100px;width: 110px;display: flex;align-items: center">
              <span style="font-size: 13px;">商品清单</span>
            </div>
            <div>
              <div v-for="item in orderMsgCtn.comMsg" style="">
                <div style="display: flex;height: 100px;">
                  <div style="height: 100%;width: 100px;display: flex;align-items: center;justify-content: center;">
                    <img :src="item.comShowMaxImgGroup" style="width: 60px;height: 60px;" />
                  </div>
                  <div style="height: 100%;width: 180px;display: flex;align-items: center;">
                  <span class="comManyMsgCls" @click="clickJumpDetaPage(item.comId)">
                    {{item.currentSerName}}{{item.currentColor}}{{item.currentConfig}}
                  </span>
                  </div>
                  <div style="height: 100%;width: 200px;margin-left: 20px;display: flex;align-items: center;">
                    <span>x{{item.ordernum}}</span>
                  </div>
                </div>

                <div v-if="item.serviceMsg" style="width: 100%;height: 50px;display: flex">
                  <div style="height: 100%;width: 100px;"></div>
                  <!--<div style="height: 100%;width: 100px;"></div>--><!--这两个层是撑空间的-->
                  <div style="height: 100%;width: 180px;display: flex;align-items: center">
                  <span style="font-size: 14px;">
                    <el-button type="warning" plain disabled size="mini">服务</el-button>&nbsp;&nbsp;&nbsp;&nbsp;{{item.serviceMsg.split("￥")[0]}}
                  </span>
                  </div>
                  <div style="height: 100%;width: 200px;margin-left: 20px;display: flex;align-items: center">
                    <span>x1</span>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!--<div v-if="orderMsgContent.keepSetSerId" style="width: 100%;height: 50px;display: flex">
            <div style="height: 100%;width: 110px;"></div>
            <div style="height: 100%;width: 100px;"></div>&lt;!&ndash;这两个层是撑空间的&ndash;&gt;
            <div style="height: 100%;width: 180px;display: flex;align-items: center">
              <span style="font-size: 14px;">
                {{orderMsgContent.serviceMsg}}
              </span>
            </div>
            <div style="height: 100%;width: 200px;margin-left: 20px;display: flex;align-items: center">
              <span>x1</span>
            </div>
          </div>-->
        </div>
        <div>
          <div style="width: 100%;height: 50px;display: flex;justify-content: space-between;align-items: center;">
            <span style="font-size: 13px;">订单金额: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span style="font-size: 16px;">￥{{orderMsgContent.total}}</span></span>
            <div v-if="orderMsgContent.orderStatus == 1" style="width: 260px;height: 100%;display: flex;align-items: center">
              <submit-button @click="clickCancelOrder(orderMsgCtn.orderId)" button-height="40" button-width="120"
                             text-msg="取消订单" button-font-color="#959795" button-back-color="#f4f4f4"/>
              <submit-button @click="clickOrderPayment(orderMsgCtn.orderId)" style="margin-left: 20px;" button-height="40" button-width="120"
                             text-msg="立即支付" button-font-color="white" button-back-color="#f34141"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SubmitButton from "../detailPage/SubmitButton";

  import {updateOrderStatus} from "../../../network/home";

  export default {
    name: "OrderMsgChild",
    components: {
      SubmitButton
    },
    methods: {
      clickCancelOrder(orderId){//点击取消订单
        updateOrderStatus(orderId)
        .then(data => {
          if (data){
            this.$message.success("订单取消成功");
            //清空订单展示也的session
            sessionStorage.removeItem("Order");
            //发送事件给父类，让父类刷新数据
            this.$emit("refreshfatherdata");
          }
        })
      },
      clickOrderPayment(orderId){//点击立即支付
        this.$router.push({path: "/payment",query: {orderId: orderId}})
      },
      clickJumpDetaPage(comId){//点击商品名称跳转到商品详情页面
        this.$router.push({path: "/detail",query: {comId}});
      },
      showOrderStatus(orderStatus){
        switch (orderStatus) {
          case 1:
            return "待付款";
            break;
          case 2:
            return "已完成";
            break;
          case 3:
            return "已取消";
            break;
        }
      }
    },
    props: {
      orderMsgContent: {
        /*
        comId: 1
        comPrice: 3799
        comShowMaxImgGroup: "https://dsfs.oppo.com/archives/202105/2021051908054160a4ff5125789.png?_w_=1080&amp;_h_=1080"
        currentColor: "星河入梦"
        currentConfig: "12G+256G"
        currentSerName: "OPPO Reno6 5G"
        getAdress: 1
        keepSetSerId: 1
        orderComMsgId: 1
        orderId: "210807179610847411"
        orderStatus: "待付款"
        serviceMsg: "屏碎保一年 ￥249"
        ordernum: 2
        paymentTime: "2021-8-5"
        paymentWay: 1
        postage: 0
        total: 1000
        userId: 1
          */
        type: Object
      }
    },
    data(){
      return {
        orderMsgCtn: this.orderMsgContent
      }
    }
  }
</script>

<style scoped>
  .comManyMsgCls{
    font-size: 14px;
  }
  .comManyMsgCls:hover{
    cursor: pointer;
    opacity: 0.5;
  }
</style>
